<template>
    <div>
        <span @click="emit('changeStatus',1)" :style="{backgroundColor:props.status==1?'gray':''}">全部({{all}})</span>
        <span @click="emit('changeStatus',2)" :style="{backgroundColor:props.status==2?'gray':''}">已完成({{complete}})</span>
        <span @click="emit('changeStatus',3)" :style="{backgroundColor:props.status==3?'gray':''}">未完成({{uncomplete}})</span>
    </div>
</template>

<script setup lang="ts">
import {computed, toDisplayString} from 'vue'
import {ToDoArr} from '../Impl/TodoImpl'
//组合API定义
interface TodoTabProps{
    todoarray:ToDoArr,
    status:number
}
const props=defineProps<TodoTabProps>();
const emit=defineEmits({
    changeStatus(s:number){//定义emit事件changeStatus的参数 必须是数字
        console.log('改变事件....')
        return true;
    }
})
// 计算属性能不能做数据类型
let all=computed<number>(()=>{
    return props.todoarray.length;
//    return "123"; //Error 计算属性定义泛型为number需要返回一个数字类型
});
let uncomplete=computed<number>(()=>{
    return props.todoarray.filter(t=>!t.done).length;
})
let complete=computed<number>(()=>{
     return props.todoarray.filter(t=>t.done).length
})
</script>

<style scoped>

</style>